<template>
  <div>
    <el-tree
      :props="defaultProps"
      show-checkbox
      node-key="id"
      :data="list"
      :default-checked-keys="xz"
      @check-change="handleCheckChange"
      ref="treeRef"
    >
    </el-tree>

    <div class="selected-result">
      <p>选中的节点名称: {{ selectedNodeNames.join(", ") }}</p>
      <p>选中的节点 ID: {{ selectedNodeIds.join(", ") }}</p>
    </div>

    <el-button style="margin-top: 10px;" type="primary" @click="sq">确认授权</el-button>
  </div>
</template>
  
  <script>
export default {
  name: "",
  data() {
    return {
      list: [],
      fulist: [],
      zilist: [],
      fu: {},
      zi: {},
      xz: [],
      selectedNodeIds: [],
      selectedNodeNames: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  props: {
    dialogVisible: Boolean,
    data: Object,
  },
  methods: {
    async cx() {
      try {
        const res = await this.axios.get("Roles/FuMenus");
        this.fulist = res.data.data;

        const promises = this.fulist.map(async (v) => {
          const res = await this.axios.get("Roles/ZiMenus", {
            params: { id: v.MenuID },
            data: {},
          });
          this.zilist = res.data.data;

          this.fu = {
            id: v.MenuID,
            label: v.MenuName,
            children: [],
          };

          this.zilist.forEach((v) => {
            this.zi = {
              id: v.MenuID,
              label: v.MenuName,
            };

            this.fu.children.push(this.zi);
          });

          return this.fu;
        });

        this.list = await Promise.all(promises);
      } catch (error) {
        console.error("请求数据失败:", error);
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      const tree = this.$refs.treeRef;
      const checkedNodes = tree.getCheckedNodes();
      this.selectedNodeNames = checkedNodes.map((node) => node.label);
      this.selectedNodeIds = tree.getCheckedKeys();
    },
    sq() {
      this.axios({
        method: "post",
        url: "Roles/SQ",
        params: {id : this.data.RoleID},
        data: this.selectedNodeIds,
      })
        .then((res) => {
          if (res.data.code > 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });

            this.$emit("update:dialogVisible", false);

            this.$emit("refresh");
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    },
    async setCheckedKeys() {
      try {
        const res = await this.axios.get("Roles/XZMenus", {
          params: { id: this.data.RoleID },
          data: {},
        });
        this.xz = res.data;
        this.$nextTick(() => {
          const tree = this.$refs.treeRef;
          if (tree) {
            tree.setCheckedKeys(this.xz);
          }
        });
      } catch (error) {
        console.error("请求选中节点数据失败:", error);
      }
    },
  },
  watch: {
    data: function (v) {
      if (v) {
        this.data = v;
        this.cx();
        this.setCheckedKeys();
      }
    },
  },
  async created() {
    await this.cx();
    await this.setCheckedKeys();
  },
};
</script>
  
  <style scoped>
.selected-result {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
</style>